<template>
	<view class="popup">
		<view class="content">
			<image class="tip-img" src="@/static/img/common/message.png"></image>
			<view class="title">
				您将授权【XXX系统】获得您的使用身份并签名信息
			</view>
			<view class="buttons">
				<Button3 class="cancel" @click="btnClick(0)">取消</Button3>
				<Button3 @click="btnClick(1)">确认</Button3>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Button3 from '@/components/button3/button3.vue';
	const emits = defineEmits(['btnClick'])
	const btnClick = (data) => {
		emits('btnClick', data)
	}
</script>

<style lang="scss">
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);

		.content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 48rpx;
			width: 578rpx;
			height: 452rpx;
			border-radius: 16rpx;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
			box-sizing: border-box;

			.tip-img {
				width: 122rpx;
				height: 150rpx;
			}

			.title {
				font-size: 28rpx;
				font-weight: bold;
				// color: $primary-color;
				line-height: 33rpx;
				margin: 40rpx 0rpx 42rpx;

				.tip {
					color: $danger-color;
				}
			}

			.buttons {
				display: flex;
				width: 100%;

				.btn {
					flex: 1;
				}

				.cancel {
					margin-right: 16rpx;
				}
			}
		}
	}
</style>